<template>
	<view class="content">
		<view class="content-top">
			<view class='cell-group'>
				<view class='cell-item' style="padding: 0;margin: 80rpx 270rpx;background-color: transparent;">
					<view class='cell-item-ft' style="position: relative;">
						<image class='cell-ft-next user-head-img have-none' style="width: 210rpx;height: 210rpx;"
							:src="avatar" @click="uploadAvatar"></image>
						<image src="/static/xj.png"
							style="width: 36rpx;height: 33rpx;position: absolute;bottom: 20rpx;right: 10rpx;" mode="">
						</image>
					</view>
				</view>
				<view class='cell-item cell-item-mid'>
					<view class='cell-item-hd'>
						<view class='cell-hd-title'>用户名</view>
					</view>
					<view class='cell-item-bd'>
						<input class='cell-bd-input' placeholder='' v-model="nickname"></input>
					</view>
				</view>
				<view class='cell-item cell-item-mid'>
					<view class='cell-item-hd'>
						<view class='cell-hd-title'>用户ID</view>
					</view>
					<view class='cell-item-bd'>
						<input class='cell-bd-input' placeholder='' disabled v-model="data.id" disabled="true"></input>
					</view>
				</view>
				<view class='cell-item cell-item-mid'>
					<view class='cell-item-hd'>
						<view class='cell-hd-title'>手机号</view>
					</view>
					<view class='cell-item-bd'>
						<input class='cell-bd-input' placeholder='' v-model="mobile" disabled="true"></input>
					</view>
				</view>
				<view class='cell-item'>
					<view class='cell-item-hd'>
						<view class='cell-hd-title'>注册时间</view>
					</view>
					<view class='cell-item-bd'>
						<input class='cell-bd-input' placeholder='' disabled :value="ctime(data.ctime)"></input>
					</view>
				</view>
				<view class='cell-item'>
					<view class='cell-item-hd'>
						<view class='cell-hd-title'>真实姓名</view>
					</view>
					<view class='cell-item-bd'>
						<input class='cell-bd-input' v-model="truename" type="nickname" v-if="truename_status"
							placeholder='请输入您的真实姓名'></input>
						<input class='cell-bd-input' v-model="truename" type="nickname" v-else disabled
							placeholder='请输入您的真实姓名'></input>
					</view>
				</view>
				<view class='cell-item'>
					<view class='cell-item-hd'>
						<view class='cell-hd-title'>身份证号</view>
					</view>
					<view class='cell-item-bd'>
						<input class='cell-bd-input' v-model="idcard" type="idcard" maxlength="18" v-if="idcard_status"
							placeholder='请填写您的身份证号' ></input>
						<input class='cell-bd-input' v-model="idcard" type="idcard" maxlength="18" v-else disabled
							placeholder='请填写您的身份证号' ></input>
					</view>
				</view>
				<view class='cell-item'>
					<view class='cell-item-hd'>
						<view class='cell-hd-title'>支付宝账号</view>
					</view>
					<view class='cell-item-bd'>
						<input class='cell-bd-input' v-model="alipay_username" type="text" maxlength="20" v-if="alipay_username_status"
							placeholder='请填写您的支付宝账号' ></input>
						<input class='cell-bd-input' v-model="alipay_username" type="text" maxlength="20" v-else disabled
							placeholder='请填写您的支付宝账号' ></input>
					</view>
				</view>
				<view style="height: 300rpx;">
					
				</view>
			</view>
		</view>
		<view class="button-bottom">
			<button @click="submitHandler()" :disabled='submitStatus' :loading='submitStatus'
				style="width: 629rpx;height: 75rpx;background: linear-gradient(180deg, #F2D7AA 0%, #DEBC86 100%);font-weight: bold;color: #000;font-size: 32rpx;">
				保存资料
			</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'picker',
				avatar: '',
				objectSex: ['男', '女', '未知'],
				index: 2,
				nickname: '',
				username: "",
				mobile: '',
				date: '1990-01-01',
				birthday: '请选择',
				sex: 0,
				truename: '',
				truenma_status:false,
				idcard: '',
				idcard_status:false,
				alipay_username:'',
				alipay_username_status:false,
				submitStatus: false,
				data: {}
			}
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			},
			isDisabled() {
				return !!this.idcard;
			}
		},
		methods: {
			ctime(e) {
				const date = new Date(e * 1000); // 注意要将时间戳转换为毫秒
				const year = date.getFullYear(); // 获取年份
				const month = ('0' + (date.getMonth() + 1)).slice(-2); // 获取月份，并补零
				const day = ('0' + date.getDate()).slice(-2); // 获取日期，并补零
				const hour = ('0' + date.getHours()).slice(-2); // 获取小时，并补零
				const minute = ('0' + date.getMinutes()).slice(-2); // 获取分钟，并补零
				const second = ('0' + date.getSeconds()).slice(-2); // 获取秒数，并补零
				const formattedTime = `${year}-${month}-${day} ${hour}:${minute}:${second}`; // 格式化为年月日时分秒的形式
				return formattedTime
			},
			//性别
			bindPickerChange: function(e) {
				this.sex = e.target.value;
			},
			//生日
			bindDateChange: function(e) {
				this.birthday = e.target.value;
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			// 用户上传头像
			uploadAvatar() {
				this.$api.uploadFiles(res => {
					if (res.status) {
						let avatar = res.data.url // 上传成功的图片地址
						// 执行头像修改
						this.$api.changeAvatar({
							avatar: avatar
						}, res => {
							if (res.status) {
								this.$common.successToShow('上传成功', () => {
									this.avatar = res.data.avatar
								})
							} else {
								this.$common.errorToShow(res.msg)
							}
						})
					} else {
						this.$common.errorToShow(res.msg)
					}
				})
			},
			// 保存资料
			submitHandler() {
				this.submitStatus = true;

				this.$api.editInfo({
					nickname: this.nickname,
					truename: this.truename,
					idcard: this.idcard,
					alipay_username: this.alipay_username,
				}, res => {
					if (res.status) {
						this.$common.successToShow(res.msg, result => {
							// this.submitStatus = false;
							uni.navigateBack({
								delta: 1
							});
						});
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				}, res => {
					this.submitStatus = false;
				});

			}
		},
		onLoad: function() {
			var _this = this;
			_this.$api.userInfo({}, function(res) {
				if (res.status) {
					_this.data = res.data
					var the_sex = res.data.sex - 1;
					if (res.data.birthday == null) {
						res.data.birthday = '请选择';
					}
					_this.truename = res.data.truename;
					_this.idcard = res.data.idcard;
					if( _this.truename==null || _this.truename == '')
					{
						_this.truename_status=true
					}
					if( _this.idcard==null || _this.idcard == '')
					{
						_this.idcard_status=true
					}
					_this.alipay_username = res.data.alipay_username;
					if(_this.alipay_username==null || _this.alipay_username == '')
					{
						_this.alipay_username_status=true
					}
					_this.nickname = res.data.nickname;
					_this.mobile = res.data.mobile || '暂无手机号';
					console.log(_this.mobile);
					_this.sex = the_sex;
					_this.index = the_sex;
					_this.birthday = res.data.birthday;
					_this.avatar = res.data.avatar;
					if (res.data.username) {
						_this.username = res.data.username;
					} else {
						_this.username = "暂无用户名"
					}
					if (_this.birthday != '请选择') {
						_this.date = _this.birthday;
					}
				} else {
					//报错了
					_this.$common.errorToShow(res.msg);
				}
			});
		}
	}
</script>

<style scoped>
	.button-bottom {
		background-color: transparent;
		bottom: 109rpx;
		box-shadow: none;
	}

	.cell-group {
		background-color: transparent;
	}

	.cell-item {
		margin: 0 45rpx;
		padding: 38rpx 30rpx;
		min-height: 0;
		border: none;
		border-radius: 20rpx;
		margin-bottom: 20rpx;
		background: #202126;
	}

	.cell-bd-input {
		text-align: right;
	}

	.user-head {
		height: 100upx;
	}

	.user-head-img {
		height: 90upx;
		width: 90upx;
		border-radius: 50%;
	}

	.cell-hd-title {
		color: #fff;
	}

	.cell-item-bd {
		flex: 1;
		color: #fff;
		font-size: 26upx;
		justify-content: flex-end;
	}

	.cell-item-hd {
		width: 160rpx;
	}

	.down {
		top: 50%;
		transform: translateY(-50%);
	}
</style>